<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8" />
		<meta name="renderer" content="webkit" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0,uc-fitscreen=yes" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<title>miniMobile</title>
		<meta name="keywords" content="miniMobile的demo" />
		<meta name="description" content="miniMobile是一个简单易用的移动框架！" />
		<!-- ui css、js -->
		<link rel="stylesheet" type="text/css" href="css/miniMobile.css"/>
		<script type="text/javascript" src="js/zepto.min.js"></script>
		<script type="text/javascript" src="js/miniMobile.js"></script>
		<!-- 字体图标 -->
		<link rel="stylesheet" type="text/css" href="plugins/fonticon/iconfont.css" />
		<!-- animate.css -->
		<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
	</head>

	<body class="fadeIn animated">
		<header class="ui-header clearfix w75 h8 f46 pl3 pr3 color8 bg-color-primary t-c o-h">
			<div class="ui-header-l fl w5">
				<a href="index.html" class="icon color8 iconfont icon-home_light"></a>
			</div>
			<div class="ui-header-c fl f30 w59">
				评论列表
			</div>
			<div class="ui-header-r fr w5">
				<i class="icon iconfont icon-phone"></i>
			</div>
		</header>
		<div class="comment w71 m2 f34 color3 clearfix">
			<div class="list clearfix mt5 mb5">
				<div class="w9 fl">
					<img src="img/user2.jpg" class="w9 h9 radius5" />
				</div>
				<div class="w61 pl2 fl">
					<p class="f40 color-primary">产品开发部</p>
					<p class="f28 color4 pb1">社区系统账号</p>
					<div class="list-text o-h">
						<p>[问题]：平台注册流程第一步中的手机号，与竞价系统新增供应商界面中的“联系电话”，这两者不等同。</p>
						<p>[意见]：判断手机号是否被注册，判断是否被之前的账号在第一步注册时填写了。根据不同的情况显示不同的界面元素！</p>
						<div class="list-shadow"></div>
					</div>
					<p class="list-alltext color-primary">全文</p>
					<div class="list-btnbox clearfix color4 f28 pt2">
						<font class="color5">23分钟</font>
						<span class="fr ml2"><i class="f34 pr1 icon iconfont icon-comment"></i>56</span>
						<span class="fr ml2"><i class="f34 pr1 icon iconfont icon-appreciate"></i>43</span>
					</div>
					<div class="bg-color6 p2 mt2 f30">
						<p class="color4 mb1">
							<i class="f34 pr1 icon iconfont icon-appreciate"></i>
							<span class="color-primary">张三、</span>
							<span class="color-primary">李四、</span>
							<span class="color-primary">张三、</span>
							<span class="color-primary">李四、</span>
							<span class="color-primary">张三、</span>
							<span class="color-primary">李四、</span>
							<span class="color-primary">张三、</span>
							<span class="color-primary">王二...</span>
							<font class="nowrap pl1">等21人觉得赞</font>
						</p>
						<p class="pt1 pb1">
							<span class="color-primary">张三：</span>这是一条认真有内涵的评论，作为一个资深的评论家，我不得不说这个评论很棒，简直帅呆了！
						</p>
						<p class="pt1 pb1">
							<span class="color-primary">大嘴巴图图：</span>评论长了不好看啊！
						</p>
					</div>
				</div>
			</div>
			<div class="list clearfix mt5 mb5">
				<div class="w9 fl">
					<img src="img/user.jpg" class="w9 h9 radius5" />
				</div>
				<div class="w61 pl2 fl">
					<p class="f40 color-primary">河南市场部</p>
					<p class="f28 color4 pb1">社区系统账号</p>
					<div class="list-text o-h">
						<p>[问题]：网站突然登录不了了，显示404。</p>
						<p>[意见]：是否可以管理一下服务器。</p>
						<!--<div class="list-shadow"></div>-->
					</div>
					<!--<p class="list-alltext color-primary">全文</p>-->
					<div class="list-btnbox clearfix color4 f28 pt2">
						<font class="color5">23分钟</font>
						<span class="fr ml2"><i class="f34 pr1 icon iconfont icon-comment"></i>56</span>
						<span class="fr ml2"><i class="f34 pr1 icon iconfont icon-appreciate"></i>43</span>
					</div>
					<div class="bg-color6 p2 mt2 f30">
						<p class="color4 mb1">
							<i class="f34 pr1 icon iconfont icon-appreciate"></i>
							<span class="color-primary">张三、</span>
							<span class="color-primary">李四、</span>
							<span class="color-primary">张三、</span>
							<span class="color-primary">李四、</span>
							<span class="color-primary">张三、</span>
							<span class="color-primary">王二...</span>
							<font class="nowrap pl1">等21人觉得赞</font>
						</p>
						<p class="pt1 pb1">
							<span class="color-primary">张三：</span>产品部赶紧解决！
						</p>
						<p class="pt1 pb1">
							<span class="color-primary">产品开发部</span> 回复
							<span class="color-primary">张三：</span>好的，正在重启服务器，马上解决！
						</p>
					</div>
				</div>
			</div>
		</div>
		<style type="text/css">
			.list-btnbox {
				line-height: 2em;
			}
			
			.list-btnbox span {
				border: 1px solid #ccc;
				line-height: 1em;
				vertical-align: middle;
				padding: 0.1rem 0.2rem;
				border-radius: 0.25rem;
				cursor: pointer;
			}
			.list-btnbox span:hover,.list-btnbox span:active{
				background: #1ab394;
				color: #fff;
				border-color: #1ab394;
			}
			.list-btnbox span i {
				vertical-align: middle;
			}
			
			.list-text {
				position: relative;
				max-height: 2.6rem;
			}
			
			.list-alltext {
				cursor: pointer;
			}
			
			.list-shadow {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				bottom: 0;
				box-shadow: 0 -40px 40px -20px #fff inset;
			}
		</style>
		<script type="text/javascript">
			$(".list-alltext").click(function() {
				$(this).hide().prev().css({
					'max-height': 'none'
				}).children('.list-shadow').hide();
			})
		</script>
		<!-- 底部导航 -->
		<nav class="demo-bottomNav mt6 w75 h12 pt1 t-c f28 bg-color8 o-h clearfix">
			<div class="w15 fl">
				<a href="index.html">
					<i class="f46 icon iconfont icon-home_light"></i>
					<p>首页</p>
				</a>
			</div>
			<div class="w15 fl">
				<a href="list-button.html">
					<i class="f46 icon iconfont icon-comment"></i>
					<p>左滑</p>
				</a>
			</div>
			<div class="w15 fl">
				<a href="list.html">
					<i class="f46 icon iconfont icon-rank"></i>
					<p>列表</p>
				</a>
			</div>
			<div class="w15 fl">
				<a href="comment.html">
					<i class="f46 icon iconfont icon-list"></i>
					<p>评论</p>
				</a>
			</div>
			<div class="w15 fl">
				<a href="my.html">
					<i class="f46 icon iconfont icon-servicefill"></i>
					<p>我的</p>
				</a>
			</div>
		</nav>
		<style type="text/css">
			.demo-bottomNav {
				line-height: 1.8em;
				border-top:1px solid #F1F1F1;
			}
			
			.demo-bottomNav a {
				display: block;
				width: 100%;
				height: 100%;
			}
		</style>
	</body>

</html>